<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      label-width="100px"
      ref="form"
      class="kylin-form"
    >
      <el-form-item :label="$t('system.host_batch')" prop="batch">
        <el-select v-model="form.batch" size="small" class="size">
          <el-option
            v-for="item in batches"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button class="kylin-button" @click="handleOk">{{
        $t("configure.issue")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import { getBatchList } from "@/api/batch";
import { issueConfigByBatch } from "@/api/issue";
export default {
  props: {
    ids: {
      type: Array,
      default: function () {
        return [];
      },
    },
    osVersion: {
      type: String,
    },
    osArch: {
      type: String,
    },
    osName: {
      type: String,
    },
  },
  data() {
    return {
      form: {
        batch: "",
      },
      rules: {
        batch: [
          {
            required: true,
            message: this.$t("system.batch_require"),
            trigger: "change",
          },
        ],
      },
      batches: [],
    };
  },
  mounted() {
    let data = {
      version: this.osVersion,
      arch: this.osArch,
      paged: false,
      os: this.osName,
    };
    getBatchList(data).then((res) => {
      res.data.data.results.forEach((row) => {
        this.batches.push({
          id: row.id,
          name: row.name,
        });
      });
    });
  },
  methods: {
    handleCancel() {
      this.$refs.form.resetFields();
      this.$emit("click");
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          issueConfigByBatch({
            configIds: this.ids,
            batchId: this.form.batch,
          }).then((res) => {
            if (res.data.code == "0") {
              this.$refs.form.resetFields();
              this.$emit("click", "success");
              this.$router.push({
                name: "log_detail",
                params: { id: res.data.data.parentId },
              });
              this.$message({
                type: "success",
                message: res.data.message,
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.size {
  width: 100%;
}
</style>